<template>
	<view class="GMVOverview">
		<view class="container">
			<view class="title">GMV概览</view>
			<view class="numBox">
				<view class="cont">
					<view class="tips">今日gmv(元)</view>
					<view class="num">{{todayIncome}}</view>
				</view>
				<view class="cont">
					<view class="tips">本月gmv(元)</view>
					<view class="num">{{monthIncome}}</view>
				</view>
			</view>
			<view class="tabs">
				<view @click="changeNum(0)" :class="type == 0 ? 'tab active' : 'tab'">近7日</view>
				<view @click="changeNum(1)" :class="type == 1 ? 'tab active' : 'tab'">近30日</view>
			</view>
			<view class="container-wrap">
				<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreGmv
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				option: {},
				count: null,
				date: null,
				type:0,
				monthIncome:0,
				todayIncome:0
			}
		},
		onLoad() {
			this.getStoreGmv()
		},
		methods: {
			async getStoreGmv() {
				const data = {
					storeId: 3,
					currentDate: '2023-04-17',
					type: this.type
				}
				const {
					data: res
				} = await getStoreGmv(data)
				this.count = res.data.count
				this.date = res.data.date
				this.todayIncome = res.data.todayIncome
				this.monthIncome = res.data.monthIncome
				
				this.option = {
					grid: {
						top: 30,
						left: '12%',
						bottom: 20,
						right: '6%',
						containLabel: false
					},
					tooltip: {
						show: true,
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							textStyle: {
								fontSize: '10'
							}
						},
						data: this.date,
						// show: false
					},
					yAxis: {
						x: 'center',
						type: 'value',
						name: '收入',
						nameLocation: "end",
						nameTextStyle: {
							fontSize: 10,
							align: "right",
							verticalAlign: "bottom"
						},
						axisLabel: {
							textStyle: {
								fontSize: '10'
							}
						},
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						}
						// show: false
					},
					series: [{
						type: 'line',
						// smooth: true,
						data: this.count,
						lineStyle: {
							color: "#E25C56"
						},
						itemStyle: {
							borderColor: "#E25C56",
							color: "#E25C56"
						}
					}]
				};
			},
			changeNum(num) {
				this.type = num
				this.getStoreGmv()
			}
		},
		onReady() {
		}
	}
</script>

<style lang="less">
	.GMVOverview {
		.container {
			margin: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			line-height: 1;
			padding-bottom: 32rpx;

			.title {
				font-size: 32rpx;
				color: #0E0E0E;
				margin: 32rpx 0 45rpx 32rpx;
			}

			.numBox {
				display: flex;
				margin-bottom: 50rpx;

				.cont {
					width: 50%;
					padding-left: 32rpx;
					box-sizing: border-box;

					.tips {
						font-size: 24rpx;
						color: #A4A4A4;
					}

					.num {
						font-size: 36rpx;
						color: #0E0E0E;
						margin-top: 16rpx;
					}
				}
			}

			.tabs {
				display: flex;
				justify-content: flex-end;
				width: 100%;
				font-size: 20rpx;
				color: #5B5B5B;

				.tab {
					margin-right: 30rpx;
				}

				.active {
					color: #DE1645;
				}
			}

			.container-wrap {
				width: 100%;
				height: 350rpx;
			}
		}
	}
</style>